// 添加用户弹窗
import React, { Component } from 'react'
import { Button,Form, Input, Modal, Select,Upload ,Icon ,message,Spin ,Radio } from 'antd'
import { connect } from 'react-redux'
import {addUserSelect,editUserData} from 'actions/userConter'
import Uploadimg from '../../components/uploadimg'
const FormItem = Form.Item
@Form.create({
    mapPropsToFields(props) {
        return {
            isTest: Form.createFormField({
                ...props.content,
                value: props.content.isTest,
            }),
            realName: Form.createFormField({
                ...props.content,
                value: props.content.realName,
            }),
            companyName: Form.createFormField({
                ...props.content,
                value: props.content.companyName,
            }),
            positionName: Form.createFormField({
                ...props.content,
                value: props.content.positionName,
            }),
            mobile: Form.createFormField({
                ...props.content,
                value: props.content.mobile,
            }),
        }
    }
})

@connect(
    (state, props) => ({
      config: state.config,
    })
)

export default class ModalAddRegistered extends Component {
    constructor (props) {
      super(props)
      this.state = {
        addUserImg:"",//添加数据-用户头像上传接收的路径
        loading:false,    
        imageflag: false,
      }
    }
    componentWillMount(){
        this.setState({
            addUserImg:this.props.content.headImage,
        })
    }
    componentDidMount() {
    }
    imageuploaded() {
        this.setState({
            imageflag:true
        });
    }
    closeFn(){
        this.setState({
            imageflag:false
        });
    }
    urlFn(url){
        this.setState({
            imageflag:false,
            addUserImg:url
        });
    }
    addSubmit(callback,e){//新增确定按钮
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if(!err){
                //提交信息接口
                if(this.props.type == 1){
                    //新增
                    const datajson = {
                        "imagePath":this.state.addUserImg,//公司头像
                        "realName":values.realName,//用户姓名
                        "companyName":values.companyName,//	公司名称
                        "positionName":values.positionName,//公司职位
                        "mobile":values.mobile,//手机号码
                        'isTest':values.isTest
                    }
                    this.props.dispatch(addUserSelect(
                        datajson,
                        (respose) => {
                            callback&&callback()
                            message.success(respose.respMsg)
                            this.props.ModalCancel();
                            this.setState({
                                addUserImg:""
                            })
                    }))
                }else if(this.props.type == 2){
                    //编辑
                    const datajson = {
                        "imagePath":this.state.addUserImg,//公司头像
                        "realName":values.realName,//用户姓名
                        "companyName":values.companyName,//	公司名称
                        "positionName":values.positionName,//公司职位
                        "mobile":values.mobile,//手机号码
                        'isTest':values.isTest,
                        'accountId':this.props.content.accountId,//
                    }
                    this.props.dispatch(editUserData(
                        datajson,
                        (respose) => {
                            callback&&callback()
                            message.success(respose.respMsg)
                            this.props.ModalCancel();
                            this.setState({
                                addUserImg:""
                            })
                    }))
                }
                
            }
        });
    }
    render () {
        const { getFieldDecorator } = this.props.form;
        const RadioGroup = Radio.Group;
        const formItemLayout = {
            labelCol: {
              xs: { span: 24 },
              sm: { span: 4 },
            },
            wrapperCol: {
              xs: { span: 24 },
              sm: { span: 16 },
            },
        };
        return (
            //添加大咖弹窗
            <Modal
                maskClosable={false}
                visible={this.props.ModalFlg}
                title={'新增数据'}
                onCancel={this.props.ModalCancel}
                footer={[
                <Button key="submit" type="primary"  onClick={this.addSubmit.bind(this,this.props.callback)}>提交</Button>,
                ]}
            >
                <Form>
                    <FormItem label="用户姓名" {...formItemLayout}>
                        {
                        getFieldDecorator('realName', {
                            rules: [{
                                required: true,message:"此项必填"
                            }],
                        })(
                            <Input placeholder="请输入关键字" size="default" style={{ width: '200px' }} />
                        )
                        }      
                    </FormItem>
                    <FormItem label="所属公司" {...formItemLayout}>
                        {
                        getFieldDecorator('companyName', {
                            rules: [{
                                required: false,message:"此项必填"
                            }],
                        })(
                            <Input placeholder="请输入所属公司" size="default" style={{ width: '200px' }} />
                        )
                        }      
                    </FormItem>
                    <FormItem label="公司职位" {...formItemLayout}>
                        {
                        getFieldDecorator('positionName', {
                            rules: [{
                                required: false,message:"此项必填"
                            }],
                        })(
                            <Input placeholder="请输入关键字" size="default" style={{ width: '200px' }} />
                        )
                        }      
                    </FormItem>
                    <FormItem label="手机号码" {...formItemLayout}>
                        {
                        getFieldDecorator('mobile', {
                            rules: [
                                {
                                    validator(rules, value, callback){                          
                                        if (!value) {
                                            callback(new Error('请输入联系电话'));
                                        }else if(/\D/g.test(value)){
                                            callback(new Error('请输入正确的联系电话'));
                                        }else{
                                            callback();
                                        }
                                    }
                                }
                            ],
                        })(
                            <Input type="number" placeholder="请输入关键字"  maxLength="11" size="default" style={{ width: '200px' }} />
                        )
                        }      
                    </FormItem>
                    <FormItem label="用户头像" {...formItemLayout}> 
                        <img onClick={this.imageuploaded.bind(this)} style={{width:"80px",height:"80px",verticalAlign:"bottom",marginRight:"10px"}} 
                            src={this.state.addUserImg ? this.state.addUserImg :require('../../images/baseHeader.png')}
                        />
                        {
                            this.state.imageflag?
                            <Uploadimg width={200} height={200} visible={this.state.imageflag} closeModal={this.closeFn.bind(this)} urlFn={this.urlFn.bind(this)}/>
                            :''                        
                        }
                    </FormItem>
                    <FormItem label="测试账号" {...formItemLayout}>
                        {
                        getFieldDecorator('isTest', {
                            rules: [{
                                required: true,message:"此项必填"
                            }],
                        })(
                            <RadioGroup >
                                <Radio value={1}>是</Radio>
                                <Radio value={0}>否</Radio>
                            </RadioGroup>
                        )
                        }      
                    </FormItem>
                </Form>
            </Modal>
        )
    }
}